<template>
  <view class="form-box">
    <q-navbar title="农事记录" :isBack="false"></q-navbar>
    <u-form ref="form" v-if="!!list.length">
      <u-form-item label="地块名称:" prop="merchandiseName" label-width="auto">
        <view class="form-item-box">
          <u-input v-model="list[0].landName" placeholder="请输入地块名称"/>
        </view>
      </u-form-item>
      <u-form-item label="农作物:" prop="merchandiseName" label-width="auto">
        <view class="form-item-box">
          <u-input v-model="cropsType.find(v=>v.typeId==list[0].cropsName).typeName" placeholder="请输入地块名称"/>
        </view>
      </u-form-item>
      <view v-for="(item, index) in list" :key="index" class="item-box">
        <view>时间: {{ item.createTime }}</view>
        <view style="display: flex;justify-content: space-between">
          <view>天气:{{ weatherType.find(v => v.typeId == item.weather).typeName }}</view>
          <view>物候期:{{ phaseType.find(v => v.typeId == item.phaseId).typeName }}</view>
          <view>温度:{{ item.temperature }}°</view>
        </view>
        <view style="display: flex">
          <view>农事操作:</view>
          <view v-for="(it, index) in typeList.filter(v=>item.operateIdList.includes(v.typeId))" :key="index">
            {{ it.typeName }}{{typeList.filter(v=>item.operateIdList.includes(v.typeId)).length-1===index?'' : '、'}}          </view>
        </view>
        <view>
          图片:
          <q-image width="100px" height="100px" :src="item.annex"></q-image>
        </view>
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      id: null,
      list: [],
      typeList: [], // 农事类型列表
      phaseType: [], // 物候期列表
      weatherType: [], // 天气类型列表
      cropsType: [], // 种植作物列表
    }
  },
  watch: {},
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
  },
  async onLoad(options) {
    if (options.id) {
      // 天气类型
      await this.$api.typesbyId('lp8282mp-1ctr505x-hsvief-0000001').then(res => {
        this.weatherType = res.data
      })

      // 农事类型
      await this.$api.typesbyId('lp827btp-1ctr4yhl-hsvief-0000002').then(res => {
        this.typeList = res.data
      })

      // 物候期
      await this.$api.typesbyId('lp826vis-1ctr4xgx-hsvief-0000001').then(res => {
        this.phaseType = res.data
      })

      // 作物类型
      await this.$api.typesbyId('lp6n3bg9-1ctnxygr-hsuwlk-0000005').then(res => {
        this.cropsType = res.data
      })
      this.id = options.id
      this.getDetail(this.id)
    }
  },
  onShow() {
  },
  methods: {
    async getDetail(id) {
      let res = await this.$api.listRecord({
        pageSize: 9999,
        pageNum: 1,
        landId: id,
      })
      this.list = res.data.records
      this.list.forEach((v) => {
        v.operateIdList = v.operateIdList !== null ? v.operateIdList.map(item => {
          return item.operateId
        }) : []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  padding: 20rpx;
  box-sizing: border-box;

  .form-item-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .item-box {
    display: flex;
    flex-direction: column;
    margin: 20rpx 0;
    border: 1px solid #eee;
    padding: 20rpx;

    > view {
      margin-bottom: 20rpx;
    }
  }
}

</style>
